{% extends "base.html" %}

{% block head %}
{{ super() }}
{% endblock %}

{% block import_area %}
{{ super() }}

<script src="{{url_for('static', filename='../static/js/plugins/jquery.charcounter.js')}}" type="text/javascript" charset="utf-8"></script>
	
<script src="{{url_for('static', filename='../static/js/control/zform.js')}}"
	type="text/javascript" charset="utf-8"></script>
{% endblock %}


{% block js_code %}
{{ super() }}	
<script>
	$(document).ready(function(){
		var $LoginForm = $('#login-form').ZForm({height:200});
		
		$('#login-dialog').hide();
		$(".counted").charCounter(320,{container: "#counter"});
	});
	
</script>
{% endblock %}

{% block content %}

<div class="container">
	<div id="jumbotron"><!--  style="background-image: url({{url_for('static', filename='../static/img/jumbotron.jpg')}});"--> 
	  <div class="container">
	    <div><img src="{{url_for('static', filename='../static/img/jumbotron.jpg')}}"/></div>
	  </div>
	</div>
	
	<div class="col-xs-12 col-sm-12">
		<div class="row">
			<div class="col-6 col-sm-6 col-lg-4">
				<h2>
					{{ _('What we provide') }}<span class="badge">42</span>
				</h2>
				<p>{{ _("Not like traditional travel group's product, we do not group national kids into a one single Camp.Instead we encourage to send individual into different real Canada Camp, 
				and bring a real Canada experience for your kids.They can live, study, travel and play with local children. There are a lot of camps can be choose, Basketball, Karate, Art, Craft, music...
				We can help you to Choose or change different classes weekly basis.Also, we provide travel in weekend") }}
				</p>
				<p>
					<a class="btn btn-default" href="/real_estates">{{ _('View details') }} <span
						class="glyphicon glyphicon-chevron-right"></span>
					</a>
				</p>
			</div>
			<!--/span-->
			<div class="col-6 col-sm-6 col-lg-4">
				<h2>
					{{ _('Why choose us') }}<span class="badge">12</span>
				</h2>
				<p>{{ _("We are Trusted Canada company registered under Canada Commerce. Every child join the camp was covered by insurance enforced by government, and we have stuff to coach every day 24/7, 
				from safety, pickup, class, accommodation and travel. The local school and family who provide accommodation had a long term partner relationship with us. Our Facility and resources are all local 
				and all of the programmes have government funding support, so the price is cheap but have very high quality. Also we adapt the web tech into every day life, you can communicate with your kids 
				either from our website or use your favorate messaging Mobile app.") }}</p>
				<p>
					<a class="btn btn-default" href="/real_estates">{{ _('View details') }} <span
						class="glyphicon glyphicon-chevron-right"></span>
					</a>
				</p>
			</div>
			<!--/span-->
			<div class="col-6 col-sm-6 col-lg-4">
				<h2>
					{{ _('How to Start') }}<span class="badge">52</span>
				</h2>
				<p>{{ _("Why not start to plan right now ? Apply class and visa usually takes 2~3 month. And you can begin to register now, it's free of charge to plan the travel on our website. Here we help you to 
				select the class, get the application proved from school, apply the visa and select the family your kids are going to live with. Start from simple registration and see what we can help.") }}</p>
				<p>
					<a class="btn btn-default" href="/real_estates">{{ _('View details') }} <span
						class="glyphicon glyphicon-chevron-right"></span>
					</a>
				</p>
			</div>
			<!--/span-->
		</div>
		<!--/row-->
	</div>
	
	
	

	<div class="col-md-3 col-md-offset-9">	
		<div id="login-dialog" class="panel panel-default">
			<div class="panel-heading">
				<span class="glyphicon glyphicon-lock"></span> Login</div>
			<div class="panel-body">
				<form id="login-form" action="/login" method="post">
					<div class="row form-group col-md-12">
						<div class="z-label col-md-3">{{ 'Account' }}</div>
						<div class="col-md-9">
							<input class="form-control z-input" type="text"  name="account" placeholder="{{ 'Username or Email' }}" />
						</div>
						<div class="z-hint"></div>
					</div>
			
					<div class="row form-group col-md-12">
						<div class="z-label col-md-3">{{ 'Password' }}</div>
						<div class="col-md-9">
							<input class="form-control z-input" type="password"  name="password" placeholder="{{ 'Enter password' }}" />
						</div>
						<div class="z-hint"></div>
					</div>
					
					
					<div class="row form-group col-md-12">
						<div class="col-md-offset-3 col-md-7">
							<div class="checkbox">
								<label>
									<input type="checkbox" name="remember-me" />{{ 'Remember me' }}
								</label>
							</div>
						</div>
					</div>
					<div class="form-group last">
						<div class="col-md-offset-3 col-md-5">
							<button id="sign-in-btn" type="submit" class="btn btn-success">{{ 'Sign in' }}</button>
						</div>
					</div>
				</form>
			</div>
			<div class="panel-footer">
				{{ 'New to Youxue?' }} <a href="/signup">{{ 'Sign up now' }}</a>
			</div>
		</div>
	
		<div id="messages"></div>
		
		<div id="message-dialog" class='hide'>
		    <div class="panel panel-default">
                <div class="panel-body">                
                    <form accept-charset="UTF-8" action="" method="POST">
                        <textarea class="form-control counted" name="message" placeholder="Type in your message" rows="5" style="margin-bottom:10px;"></textarea>
                        <h6 class="pull-right" id="counter">320 characters remaining</h6>
                        <button class="btn btn-info" type="submit">Post New Message</button>
                    </form>
                </div>
            </div>
		</div>
	</div>
</div>
{% endblock %}
